<template>
  <div>
    <el-row style="margin-bottom:10px">
      <el-col :span="8" >
        <h4 style="margin:0">
          <span>推荐管理</span>
          <!--<el-button  type="primary" class="addBtn" @click="sortBtn"><i class="el-icon-sort"></i>排序</el-button>-->
        </h4>
      </el-col>
      <el-col :span="16" style="text-align:right">
        <!--<el-input @input="sheachFun" style="width:300px" placeholder="输入搜索内容"></el-input>-->
      </el-col>
    </el-row>
    
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="序号" width="50">
        <template slot-scope="scope">
        {{scope.$index+1}}          
        </template>
      </el-table-column>
      <el-table-column prop="address" label="发布时间" width="100">
        <template slot-scope="scope">
        {{gettimeFun(scope.row)}}          
        </template>
      </el-table-column>      
      <el-table-column prop="type" label="类型" width="50">>
        <template slot-scope="scope">
          {{typefun(scope.row.type)}}
        </template>
      </el-table-column> 
      <el-table-column label="标题">
        <template slot-scope="scope">
         {{titleFun(scope.row)}}
        </template>
      </el-table-column> 
      <el-table-column prop="date" label="分类" width="100">
        <template slot-scope="scope">
         {{topicFun(scope.row)}}
        </template>
      </el-table-column> 
      <el-table-column prop="userNick" label="发布ID" width="100">
        <template slot-scope="scope">
          {{tableUser(scope.row)}}
        </template>
      </el-table-column> 
      <!--<el-table-column prop="date" label="排序" width="40">
        <template slot-scope="scope">
          {{soltFun(scope.row)}}
        </template>
      </el-table-column> -->
      <el-table-column prop="date" label="评论" width="50">
        <template slot-scope="scope">
          {{comentFun(scope.row)}}
        </template>
      </el-table-column> 
      <el-table-column prop="date" label="喜欢" width="50">>
        <template slot-scope="scope">
          {{likeFun(scope.row)}}
        </template>
      </el-table-column> 
      <el-table-column prop="date" label="点击量" width="50">>
        <template slot-scope="scope">
          {{clickFun(scope.row)}}
        </template>
      </el-table-column> 
      <el-table-column prop="date" label="图片" width="100">
        <template slot-scope="scope">
          <img :src="imgFun(scope.row)" style="margin-right:5px;width:70px;height:80px"/>
        </template>
      </el-table-column> 
      
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <div>
            <el-button class="addBtn" type="primary" @click="tickFun(scope.row.record_id)" v-if="userRole.RM_901001"> 置顶</el-button>
            <el-button class="addBtn" type="danger" @click="deletData(scope.row.record_id)"> 取消推荐</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

     <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>


    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <sort-arrs :sortStatus="sortStatus" v-on:checkfun ="sorlCheckStatus"></sort-arrs>    
  </div>
</template>

<script>
  import sortArrs from './Articel/sort'  
  import Http from '@/Http/Http'
  import getTime from '@/Http/getTime'
  

  export default {
    data() {
      return {
        userRole:JSON.parse(sessionStorage.getItem('userSolt')),
        dialogVisible:false,
        sortStatus:false,
        tableData: [],
        total:0,
        page:1,
        options:[{
          value:0,
          label:'全部'
        },{
          value:1,
          label:'牙齿矫正'
        },{
          value:2,
          label:'口腔健康'
        },{
          value:3,
          label:'儿童口腔'
        },{
          value:4,
          label:'种植牙'
        }],
        currentPage4: 1,//分野
        pageSize:10
      }
    },
    components:{
      sortArrs
    },
    created() {
      this.getlist()
    },
    methods: {
      getlist() {
         Http.recomentlist({
          "pageIndex":this.page,
          "pageSize":this.pageSize
         })
        .then( res => {
          this.tableData = res.data.data.rows;
          this.total = res.data.data.total;
           this.dataArtice = '';
          this.articelStatus = false
        })
        .catch( error => {
          
        })
      },
      gettimeFun(row){
        let val =0;
        if(row.type ==1){
          val = row.article.createtime
        } else if(row.type == 2 ) {
          val = row.video.video.created_at
        }
        return getTime(val)
      },
      titleFun(row) {
        let titletxt = '';
        if(row.type ==1){
          titletxt= row.article.articleTitle
        } else if(row.type == 2 ) {
          titletxt = row.video.video.title
        }
        return titletxt
      },
      typefun(row){
        if(row == 1 ){
          return '文章'
        }else if( row ==2 ) {
          return '视频'
        }
        
      },
      tableUser(row){
        let txt = '';
        if(row.type ==1){
          if(!row.article.articleUser) return ;
          txt = row.article.articleUser.userNick

        } else if(row.type == 2 ) {
          if(!row.video.userInfo) return;
          txt = row.video.userInfo.userNick
        }
        return txt
      },
      clickFun(row) {
        if(row.type ==1){
          return row.article.countRead
        } else if(row.type == 2 ) {
          return row.video.page_view
        }
      },
      likeFun(row) {       
        if(row.type ==1){
          return row.article.countLike
        } else if(row.type == 2 ) {
          return row.video.favorites
        }
      },
      comentFun(row) {
        if(row.type ==1){
          return row.article.countComment
        } else if(row.type == 2 ) {
          return row.video.favorites
        }
        
      },
      topicFun(row) {
        if(row.type ==1){
          if(row.article.topic){
            return this.options[row.article.topic.id].label
          } else {
            return
          }
        } else {
          return this.options[row.video.type].label
        }
        if(row.topic = undefined ){
          return this.options[row.topic.id]
        } else {
          return
        }
        // const index = row.topic.id;
      },
      soltFun(row) {
        return 111
      },
      imgFun(row) {
        if(row.type ==1){
          if(row.article.articleThum){
            return row.article.articleThum
          }
        } else if(row.type == 2 ) {
          if(row.video.video.source_thum){
            return row.video.video.source_thum
          }
        }
      },
      goEdit(){
        this.$router.push('/Home/editor')
      },
      deletData(row) {
         
         Http.cancelRecomend(row)
        .then( res => {
          if(res.data.code == 200 ){
            this.$message.success('成功取消推荐')
            this.getlist()
          } else if(res.data.code == -1003) {
            this.$message.error(`请求失败原因：${res.data.message}`)
            this.$router.push('/')
          }
        })
        .catch(error => {
          this.$message.error('服务器请求失败')
        })
      },
      tickFun(row) {
       
        Http.tickRecomend(row)
        .then( res => {
          if(res.data.code == 200 ){
            this.$message.success('置顶成功')
            this.getlist()
          } else if(res.data.code == -1003) {
            this.$message.error(`请求失败原因：${res.data.message}`)
             setTimeout(()=>{
              this.$router.push('/')
            },2000)
          }
        })
        .catch(error => {
          this.$message.error('服务器请求失败')
        })
      },
      chageStatus(val) {
        let txt ='';
        val? txt ='开启' : txt = '关闭';
       
       
        
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //排序
      sortBtn() {
        this.sortStatus = true
      },
      sorlCheckStatus(){
        this.sortStatus = false
      },
      //搜索
      sheachFun(val){
        
      },
       //分页
      handleSizeChange(val) {
        this.pageSize = val;
        this.getlist()
        
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getlist()
        
      },
    }
  }
</script>